﻿<template>
    <div class="container ActivityOrderInfo" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <div class="schoolBoxCont">
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">订单号</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.orderNumber" placeholder="订单号"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <!-- <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">学生姓名</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.contact" placeholder="学生姓名"></el-input>
                            </div>
                        </el-form-item>
                    </div> -->
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">联系电话</div>
                            <div class="schoolBoxContItemInput">
                                <el-input clearable v-model="queryBox.phone" placeholder="联系电话"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">业务线</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable filterable v-model="queryBox.businessType">
                                    <el-option
                                        v-for="item in studentBusinessType"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">支付状态</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.payStatus1"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in payStatusOptions"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">分中心名称</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.centerCode"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in branchcenterOption"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle" style="width:115px">支付时间</div>
                            <div class="schoolBoxContItemInput" style="width:428px">
                                <el-date-picker
                                    v-model="payDate"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </div>
                        </el-form-item>
                    </div>
                    <!-- <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">所属部门</div>
                            <div class="schoolBoxContItemInput">
                                <el-select clearable v-model="queryBox.departmentId" filterable>
                                <el-option
                                    v-for="item in departmentInfoList"
                                    :key="item.id"
                                    :label="item.deptName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                            </div>
                        </el-form-item>
                    </div> -->
                    <!-- <div class="schoolBoxContItem">
                        <el-form-item label prop="name">
                            <div class="schoolBoxContItemTitle">支付方式</div>
                            <div class="schoolBoxContItemInput">
                                <el-select
                                    v-model="queryBox.payType"
                                    filterable
                                    clearable
                                    placeholder="请选择"
                                    value-key="id"
                                    style="width: 100%;"
                                >
                                    <el-option
                                        v-for="item in payTypeOptions"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </div> -->
                    <!-- <div class="depart-box">
                            <div class="slect-title">咨询师</div>
                            <el-form-item prop="threeLevelDepartment">
                                <el-select clearable v-model="queryBox.counselor" filterable>
                                    <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :label="item.realName"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div> -->
                </div>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="get_subcentersearch"
                />
            </div>
        </div>
        <p style="float:left;margin:20px 0 20px 23px;font-size:20px">数据统计：支付成功金额总计<span style="color:red">{{this.sum}}</span>元</p>
        <div class=" fr">
            <kt-button
                :label="$t('导出')"
                type="primary"
                perms="OrderInfoMange:ActivityOrderInfo:export"
                @click="handleExport"
                style="float:left;margin-bottom:20px"
            />
            <!-- perms="directCampCenter:MyThree:export" -->
        </div>
        <!--表格内容栏-->
        <div class="btn">
            <Crm-table
                ActivityOrderInfo
                @selectionChange="selectionChange"
                class="table-width"
                :showOverflowTooltip='false'
                width="400"
                :data="pageResult"
                :columns="columns"
                :loading="loading"
                @findPage="findPage"
                @handleSee='handlePush'
            ></Crm-table>
                <!-- permsEdit="directCampCenter:MyThree:edit"
                permsSee="directCampCenter:MyThree:see"
                permsDelete="directCampCenter:MyThree:delete"
                permsReport="directCampCenter:MyThree:follow" -->
        </div>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
import Checkrepeat from "@/views/Core/Checkrepeat";
import Cookies from "js-cookie";
export default {
    name: "School",
    components: {
        PopupTreeInput,
        CrmTable,
        KtButton,
        CrmSwitch,
        Checkrepeat
    },
    data() {
        return {
            isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
            showBatchDelete: false,
            mytime: "",
            size: "mini",
            selectDisabled: false, //跟进弹窗客户进展状态
            typeDisabled: false,
            schoolSectionArr: [], //学段数组
            filters: {
                name: ""
            },
            form: {
                file: ""
            },
            isTodayTracking: "",
            fileList: [],
            downloadTmplUrl: baseUrl + "/template/TripartiteTemplate.xlsx", //模板下载地址
            // 查询条件
            student_data_from_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            // 查询条件
            student_data_from_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            student_type_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            student_progress_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            student_data_from_type_options: [
                {
                    label: " ",
                    key: " "
                }
            ],

            isRecord_type_options: [
                {
                    key: "1",
                    value: "已报备"
                },
                {
                    key: "2",
                    value: "未报备"
                }
            ],
            isTodayTracking_options: [
                {
                    value: "是",
                    label: "1"
                }
            ],

            payTypeOptions: [],
            payStatusOptions:[],
            createDateArr: [], // 创建时间数组
            trackingDateArr: [], //跟进时间数组
            student_communication_type: [],
            queryBox: {
                orderNumber: "",
                phone: "",
                businessType: "",
                departmentId: "",
                payType: "",
                realName: "",
                payStatus1:""
            },
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "orderNumber", label: "订单号", minWidth: 100 },
                { prop: "activityCode", label: "活动名称", minWidth: 100 },
                { prop: "actualMoney", label: "成单金额", minWidth: 80 },
                // { prop: "regionaManager", label: "学生姓名", minWidth: 80 },
                { prop: "phone", label: "联系电话", minWidth:110 },
                { prop: "payOrderNum", label: "交易单号", minWidth: 80 },
                { prop: "centerName", label: "分中心名称", minWidth: 80 },
                { prop: "businessName", label: "业务线", minWidth: 80 },
                { prop: "productName", label: "产品名称", minWidth: 80 },
                { prop: "createDate", label: "下单时间", minWidth: 80 },
                { prop: "counselorName", label: "咨询师", minWidth: 80 },
                // { prop: "deptName", label: "所属部门", minWidth: 80 },
                { prop: "payStatusName", label: "支付状态", minWidth: 80 },
                { prop: "payTypeName", label: "支付方式", minWidth: 80 }
            ],
            pageResult: {
                content: []
            },
            operation: false, // true:新增, false:编辑
            batchdistribution: false, //显示批量分配弹窗
            selectionsLength: "",
            selections: [], //选中列表集合
            ids: [], //分配ID集合
            deptData: [], //部门树
            deptTree: {
                label: "deptName",
                children: "children"
            },
            addFollow: false, //显示跟进窗口
            deptinputValue: "",
            deptmodeoptionsValue: "",
            AllotData: {
                assignType: 2,
                ids: "",
                thirdLevelDepartment: "",
                userId: "",
                belong_to_type: ""
            },
            // 地区
            options: regionDataPlus,
            selectedOptions: [],
            loading: false, // 加载标识
            checkrepeatShow: false,
            checkloading: false,
            checkMessage: "",
            isLoadingSuccess: false,
            reportShow: false,
            recordData: {
                trackingDate: "",
                expectedClosingDate: ""
            },
            queryTrackingRecordData: {},
            threeDept: [],
            school_recordType_options: [],
            userName: [],
            school_audit_status_option: [],
            auditStatus: "",
            pageRequest3: {
                pageNum: 1,
                pageSize: 10
            },
            tripartiteTypeOption: [],
            studentBusinessType:[],
            userList:[],
            departmentInfoList:[],
            branchcenterOption: [],
            payDate:[],
            sum:0
        };
    },
    beforeMount(){
        let params=this.queryBox
        // this.$api.agent
        // .sumPayMoney(this.queryBox)
        // .then(res => {
        //     if (res.result == 2) {
        //         this.$message({ message: res.msg, type: 'error' });
        //     } else {
        //         this.sum=res.data
        //         // this.$message({ message: res.msg, type: 'success' });
        //     }
        // });
    },
    methods: {
        // 客户类型
        get_student_type() {
            this.student_type_options = JSON.parse(
                localStorage.getItem("schoolType")
            );
            this.school_audit_status_option = JSON.parse(
                localStorage.getItem("schoolAuditStatus")
            );
            this.$api.dropdown
                .users({ userType: 3, deptType: 4, accountStatus: 1 })
                .then(res => {
                    if (res.result == 1) {
                        this.userName = res.userInfoList;
                    }
                });
             // 获取业务线
            this.studentBusinessType = JSON.parse(
                localStorage.getItem("studentBusinessType")
            );
            this.$api.dropdown.branchcenter().then(res => {
                this.branchcenterOption = res.branchCenterInfoList;
            });
            // 支付状态
            this.$api.user.optionsList({codeType:'pay_status'}).then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.payStatusOptions=res.keyValueList
                }
            });
            // 支付方式
            this.$api.user.optionsList({codeType:'pay_type'}).then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.payTypeOptions=res.keyValueList
                }
            });
            this.$api.dropdown.users({ userType: 3, deptType: 1 }).then(res => {
                if (res.result == 1) {
                    this.userList = res.userInfoList;
                }
            });
            // this.$api.student.queryDepartmentListForCustomerManager({ deptType: 1 }).then(res => {
            //         this.departmentInfoList = res.departmentInfoList;
            //     });
        },
         // 搜索
        get_subcentersearch() {
            this.loading = true;
            this.pageRequest.pageNum = 1;
            if(this.payDate.length>0){
                this.queryBox.payStartDate=this.payDate[0]
                this.queryBox.payEndDate=this.payDate[1]
            }
            this.dataStatistics()
            this.findPage(null);
            
        },
        // 数据统计
        dataStatistics(){
            this.queryBox.payStatus='1'
            this.$api.agent
            .sumPayMoney(this.queryBox)
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.sum=res.data
                    // this.$message({ message: res.msg, type: 'success' });
                }
            });
        },
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }  
            this.queryBox.pageNum = this.pageRequest.pageNum;
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.payStatus=this.queryBox.payStatus1
            this.$api.agent
                .activityOrderInfoList(this.queryBox)
                .then(res => {
                    let content = { content: res.data, totalSize: res.total };
                    this.pageResult = content;
                    this.pageResult.content.forEach(item => {
                        //转换y意向程度
                        this.tripartiteTypeOption.forEach(type_item => {
                            if (type_item.key == item.tripartiteType) {
                                item.tripartiteTypeStr = type_item.value;
                            }
                        });
                        // 推送状态按钮解析
                        if(item.payStatus==1&&item.pushStatus==2){
                            item.ts='重新推送'
                        }
                        if(item.payStatus==1&&item.pushStatus==3){
                            item.ts='推送'
                        }
                    });
                    this.dataStatistics()
                    this.loading = false;
                })
                .then(data != null ? data.callback : "");
        },

        // 重置
        reset(queryBox) {
            // this.$refs.queryBox.resetFields();
            this.queryBox.name = "";
            this.queryBox={
                orderNumber: "",
                phone: "",
                businessType: "",
                payType: "",
                counselor: "",
                payStartDate:'',
                payEndDate:''
            },
            this.payDate=[]
            this.findPage(null);
        },
        // 获取部门数据
        get_dept_data() {
            this.$api.dropdown.deptLevel3().then(res => {
                this.deptData = res.departmentInfoList;
            });
        },

        // 获取选中的表格数据
        selectionChange: function(params) {
            let selectionsLength = params.selections.length;
            this.selections = params.selections;
            this.ids = [];
            let idstu = this.selections.map(item => item.id);
            this.ids = idstu;
        },
        // 导出
        handleExport(){
            axios({
                method: "get",
                url: baseUrl + "/activityOrderInfo/exportInfo",
                params: this.queryBox
            }).then(res => {
                window.open(res.request.responseURL);
            });
        },
        // 推送
        handlePush(params){
            this.$api.student
            .rePush({
                orderNumber:params.row.orderNumber
            })
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                } else {
                    this.$message({ message: res.msg, type: 'success' });
                    this.findPage(null)
                }
            });
        }
    },
    mounted() {
        this.get_student_type();
        this.get_dept_data();
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scope>
.ActivityOrderInfo{
    .el-table th, .el-table tr{
        height: 35px;
    }
}

.MyThreePop {
    .el-row .el-col {
        margin-left: 0;
    }
}
.add-btns .el-button:nth-child(1) {
    margin-right: 10px;
}
.second-contain-box {
    width: 95%;
    margin: 0 auto;
    .el-col {
        text-align: left;
        margin: 4px 0;
    }
    .el-row {
        margin: 0 0 !important;
    }
    .el-col i {
        font-style: normal;
        display: inline-block;
    }
}
.second-contain-box2 {
    .el-col i {
        margin-top: 0px !important;
    }
}
.schoolBoxCont {
    margin: 5px 5px;

    .schoolBoxContItem {
        margin-right: 10px;
        float: left;
        .el-form-item__content {
            display: flex;
            flex-direction: row;
        }
        .schoolBoxContItemTitle {
            background: #f5f7fa;
            width: 115px;
            border: 1px solid #dcdfe6;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            line-height: 39px;
            border-right: none;
        }
        .schoolBoxContItemInput {
            width: 150px;
            line-height: 39px;
            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 100%;
            }
        }
    }
}
</style>
